<template>
  <div>
    <JcTitle name="报工查询" icon></JcTitle>
    <div class="content">
      <div class="flex">
<!--        <el-input v-model="salkhddh" placeholder="客户订单号" />-->
<!--        <el-input v-model="fbillNo" placeholder="单据编号" />-->
<!--        <el-input v-model="fmobillno" placeholder="生产订单号" />-->
<!--        <el-input v-model="fproductmodel" placeholder="产品助记码" />-->
<!--        <el-input v-model="value" placeholder="扫码查询" @keyup.enter.native="aaa" />-->
<!--        <el-button type="primary" @click="queryWorkList">搜索</el-button>-->
        <el-button type="primary" @click="reloadCode">重新扫码</el-button>
      </div>
      <sx-table
          serial
          :table-data="tableData"
          :table-header="tableHeader"
          table-height="80vh"
          getRowKeys="fid"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <sx-table
                serial
                :table-data="props.row.details"
                :table-header="tableHeader2"
                table-height="auto"
            />
          </template>
        </el-table-column>
        <!--订单编码-->
        <template v-slot:tagSlot="col">
          <el-link type="primary" @click="detailPurchase(col.scope.row)">{{ col.scope.row.fbillNo }}</el-link>
        </template>
        <!--审核状态-->
        <template v-slot:btnState="col">
          <span v-if="col.scope.row.fdocumentstatus === ''" />
          <el-tag v-else :type="col.scope.row.stateColor">{{ col.scope.row.fdocumentstatus }}</el-tag>
        </template>
      </sx-table>
      <!--    分页器-->
    <!--      <div class="footer">-->
    <!--        <jc-pagination-->
    <!--            :total="total"-->
    <!--            :page.sync="currentPage"-->
    <!--            :limit.sync="size"-->
    <!--            @pagination="queryWorkList"-->
    <!--        />-->
    <!--      </div>-->
    </div>
    <el-dialog
        title="请扫码"
        :visible.sync="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
        center
        :before-close="beforeClose">
      <div>
        <el-input
            ref="inpu"
            v-model="value"
            clearable
            placeholder="请扫描二维码"
            @keyup.enter.native="confirmNum"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmNum">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import JcTitle from "@/components/Title";
import {queryWorkReportDetailByProcessID, queryWorkReportList} from "@/api/zhuye";
import {toMxBmina} from "@/utils/utils";

export default {
  components: {
    JcTitle,
    jcPagination: () => import('@/components/Pagination')
  },
  data() {
    return {
      dialogVisible: true,
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 50, // 每页显示多少条数据
      salkhddh: '',
      fbillNo: '',
      fmobillno: '',
      fproductmodel: '',
      value: '',
      tableData: [],
      tableHeader: [
        { label: '日期', prop: 'fdate', minWidth: '110' },
        { label: '单据编号', type: 'tag', prop: 'fbillNo', minWidth: '140' },
        { label: '审核状态', type: 'state', prop: 'fdocumentstatus', minWidth: '100' },
        { label: '助记码', prop: 'fmodel', minWidth: '120' },
        { label: '物料编码', prop: 'fnumber', minWidth: '120' },
        { label: '物料名称', prop: 'fname', minWidth: '200' },
        { label: '单位', prop: 'funit', minWidth: '80' },
        { label: '生产订单号', prop: 'fsrcbillno', minWidth: '100' },
        { label: '工单数量', prop: 'fmoqty', minWidth: '100' },
        // { label: '已完成数量', prop: 'fcompleteqty', minWidth: '100' },
      ],
      tableHeader2 : [
        { label: '组别', prop: 'fgroupname', minWidth: '100' },
        { label: '工序编码', prop: 'fprocessname', minWidth: '80' },
        { label: '工序名称', prop: 'fprocessnumber', minWidth: '80' },
        { label: '工单数量', prop: 'fqty', minWidth: '80' },
        { label: '报工数量', prop: 'fworkqty', minWidth: '80' },
        { label: '倍数', prop: 'fnum', minWidth: '80' },
        { label: '单价', prop: 'fprice', minWidth: '80' },
        { label: '金额', prop: 'fsumprice', minWidth: '80' },
        { label: '报工人', prop: 'fworker', minWidth: '80' }
      ]
    }
  },
  created() {
    this.dialogVisible = true
    setTimeout(() => {
      this.$refs.inpu.focus()
    }, 100)
    // this.queryWorkList()
  },
  methods: {
    queryWorkList() {
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size,
        search: [
          {fid: 7, field: "salkhddh", seach: this.salkhddh},
          {fid: 7, field: "fbillNo", seach: this.fbillNo},
          {fid: 7, field: "fmobillno", seach: this.fmobillno},
          {fid: 7, field: "fproductmodel", seach: this.fproductmodel}
        ]
      }
      queryWorkReportList(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.array.map(item => {
            return toMxBmina(item)
          })
          this.total = res.data.total
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    reloadCode() {
      this.dialogVisible = true
      setTimeout(() => {
        this.$refs.inpu.focus()
      }, 100)
    },
    confirmNum() {
      const DATA = {
        processID: this.value.split('UU')[0],
      }
      queryWorkReportDetailByProcessID(DATA).then(res => {
        if (res.code === 0) {
          this.value = ''
          this.tableData = res.data.map(item => {
            return toMxBmina(item)
          })
          this.dialogVisible = false
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 详情
    detailPurchase(row) {
      this.$router.push({ path: `/workOrderDetail/${row.fid}` })
    },
    beforeClose() {
      if (!this.value) {
        this.$refs.inpu.focus()
        return
      }
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  margin-top: 65px;
  padding: 10px;
  .flex {
    display: flex;flex-wrap: wrap;
    margin-bottom: 10px;
    .el-input {
      minWidth: 200px;
      margin-right: 10px;
    }
  }
}
</style>
